window.onload = function() {
    var username = document.getElementById("username");
    var password = document.getElementById("password");
    console.log(username.value)

    username.addEventListener("input", function(e) {
        console.log("正在输入", e.target.value);
    })

    let btn = document.querySelector("button");
    btn.addEventListener("click", (e) => {
        e.preventDefault();
        let name = username.value
        let passd = password.value

        let promise = new Promise((resolve, reject) => {

            let data = {
                username: name,
                password: passd
            }
            let xhr = new XMLHttpRequest();
            xhr.open("Get", "http://172.19.14.60:8080/login", true); 
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log("请求成功")
                }
            }

            console.log("开始发送请求")
            let jsonData = JSON.stringify(data)
            console.log(jsonData)
            xhr.send(jsonData);
            // if(xhr.readyState === 4 && xhr.status === 200){
            //      console.log("请求成功，即表单提交成功   ")
            // }

            //promise(承诺)一种异步编程的解决方法,用于处理需要等待结果的操作

            //     let success = true //代表某个异步操作成功
            //     if (success) {
            //         resolve() //成功
            //     } else {
            //         reject() //失败拒绝
            //     }
            setTimeout(() => {
                console.log("十秒到了")
            }, 10000);

        })
        promise.then(() => {
            console.log("成功了")
        }).catch(() => {
            console.log("失败了")
        }).finally(() => {
            console.log("操作完成了")
        })

    });
}